<!DOCTYPE html>
<html lang="zh-CN"><head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<title>第39款插件：jquery.flexslider.js带左右箭头且带按钮可滚动的图片插件</title>
	
	
	<!-- start --> 
	<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
	<script type="text/javascript" src="js/jquery.easing.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/flexslider.css" />
	<script type="text/javascript">
		$(function() {
			$(".flexslider").flexslider({
				animation: "slide",
				animationLoop: false,
				itemWidth: 210,
				itemMargin: 5,
				minItems: 2,
				maxItems: 4,
			    //pausePlay: true
			});
		});	
	</script>
	<style type="text/css">
	.slides li p{height:24px; line-height:24px; text-align:center;font-size:12px;}
	</style>
	<!-- end --> 
	

	<body>
		<div class="menu">
			<p class="menuc">
				<span></span>
				<a href="index.html">1、基本</a>
				<a href="index2.html">2、图文混排</a>
				<a class="cur" href="index3.html">3、多图自适应滑动</a>
				<a href="index4.html">4、带缩略图的相册</a>
				<a href="index5.html">5、案例:神剑监理全屏轮播</a>
				<a href="index6.html">6、案例:新浪2014车展幻灯</a>
			</p>
		</div>
		<div class="main">
			<div class="mianc">
				<h1>第39款插件：jquery.flexslider.js带左右箭头且带按钮可滚动的图片插件</h1>
				<h2>多图自适应滑动</h2>
				
				<!-- start --> 
				<div class="flexslider carousel" style="width:640px;margin-left:110px;">
					<ul class="slides">
						<li><img src="images/sc1.jpg" /><p>图片展示1</p></li>
						<li><img src="images/sc2.jpg" /><p>图片展示2</p></li>
						<li><img src="images/sc3.jpg" /><p>图片展示3</p></li>
						<li><img src="images/sc4.jpg" /><p>图片展示4</p></li>
						<li><img src="images/sc5.jpg" /><p>图片展示5</p></li>
						<li><img src="images/sc6.jpg" /><p>图片展示6</p></li>
						<li><img src="images/sc1.jpg" /><p>图片展示7</p></li>
						<li><img src="images/sc2.jpg" /><p>图片展示8</p></li>
						<li><img src="images/sc3.jpg" /><p>图片展示9</p></li>
						<li><img src="images/sc4.jpg" /><p>图片展示10</p></li>
						<li><img src="images/sc5.jpg" /><p>图片展示11</p></li>
						<li><img src="images/sc6.jpg" /><p>图片展示12</p></li>
					</ul>
				</div>
				<!-- end --> 
				
				
				
				<p class="dowebok-explain"></p>
			

<!-- code start --> 
<div class="code">
	
<h3 class="h31 cur">JS和CSS</h3>
<div class="pre">
<pre class="pre-show prettyprint linenums">
&lt;script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.flexslider-min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.easing.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" type="text/css" href="css/flexslider.css" /&gt;
&lt;script type="text/javascript"&gt;
	$(function() {
		$(".flexslider").flexslider({
			animation: "slide",
			animationLoop: false,
			itemWidth: 210,
			itemMargin: 5,
			minItems: 2,
			maxItems: 4,
			//pausePlay: true
		});
	});	
&lt;/script&gt;
&lt;style type="text/css"&gt;
.slides li p{height:24px; line-height:24px; text-align:center;font-size:12px;}
&lt;/style&gt;
</pre>
</div>

<h3 class="h32 ">HTML</h3>
<div class="pre">
<pre class="pre-show prettyprint linenums">
&lt;div class="flexslider carousel" style="width:640px;margin-left:110px;"&gt;
	&lt;ul class="slides"&gt;
		&lt;li&gt;&lt;img src="images/sc1.jpg" /&gt;&lt;p&gt;图片展示1&lt;/p&gt;&lt;/li&gt;
		&lt;li&gt;&lt;img src="images/sc2.jpg" /&gt;&lt;p&gt;图片展示2&lt;/p&gt;&lt;/li&gt;
		&lt;li&gt;&lt;img src="images/sc3.jpg" /&gt;&lt;p&gt;图片展示3&lt;/p&gt;&lt;/li&gt;
		&lt;li&gt;&lt;img src="images/sc4.jpg" /&gt;&lt;p&gt;图片展示4&lt;/p&gt;&lt;/li&gt;
		&lt;li&gt;&lt;img src="images/sc5.jpg" /&gt;&lt;p&gt;图片展示5&lt;/p&gt;&lt;/li&gt;
		&lt;li&gt;&lt;img src="images/sc6.jpg" /&gt;&lt;p&gt;图片展示6&lt;/p&gt;&lt;/li&gt;
		&lt;li&gt;&lt;img src="images/sc1.jpg" /&gt;&lt;p&gt;图片展示7&lt;/p&gt;&lt;/li&gt;
		&lt;li&gt;&lt;img src="images/sc2.jpg" /&gt;&lt;p&gt;图片展示8&lt;/p&gt;&lt;/li&gt;
		&lt;li&gt;&lt;img src="images/sc3.jpg" /&gt;&lt;p&gt;图片展示9&lt;/p&gt;&lt;/li&gt;
		&lt;li&gt;&lt;img src="images/sc4.jpg" /&gt;&lt;p&gt;图片展示10&lt;/p&gt;&lt;/li&gt;
		&lt;li&gt;&lt;img src="images/sc5.jpg" /&gt;&lt;p&gt;图片展示11&lt;/p&gt;&lt;/li&gt;
		&lt;li&gt;&lt;img src="images/sc6.jpg" /&gt;&lt;p&gt;图片展示12&lt;/p&gt;&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;
</pre>
</div>

					
</div>
<!-- code end --> 				
				
			</div>
		</div>
		<link href="http://www.ijquery.cn/frame/v2/v2.css" rel="stylesheet"><script src="http://www.ijquery.cn/frame/v2/v2.js"></script>
	</body>
</html>